<template>
  <div class="index" v-loading.fullscreen.lock="bodyloading">
    <div class="search">
      <van-search
        v-model="value"
        placeholder="请输入门店名称"
        @search="onSearch"
      />
      <div class="add" @click="onCancel">
        <van-icon name="add-o" />
        <p>新增</p>
      </div>
    </div>
    <div class="subnav">
      <van-tabs @click="navclick" v-model="active">
        <van-tab
          v-for="(item, index) in navlist"
          :title="item.name"
          :key="index"
          :badge="item.sum == 0 ? '' : item.sum"
        ></van-tab>
      </van-tabs>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="listbox">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="listonLoad"
          :immediate-check="false"
        >
          <div
            class="list"
            v-for="item in list"
            :key="item.id"
            @click="todetail(item)"
          >
            <div>
              <p>小微：{{ item.tradeName }}</p>
            </div>
            <div>
              <p>渠道：{{ item.channelName }}</p>
            </div>
            <div>
              <p>门店名称：{{ item.custName }}</p>
            </div>
            <div>
              <p>门店编码：{{ item.custCode }}</p>
            </div>
            <div>
              <p>产业：{{ item.industryName }}</p>
            </div>
            <div>
              <p>主题：{{ item.themeName }}</p>
            </div>
            <div>
              <p>申请时间：{{ item.createTime }}</p>
            </div>
            <div class="state">
              <p>状态：{{ item.statusName }}</p>
            </div>
            <div v-if="item.applyOpinion && item.planNodeStatus == '2003'">
              <p style="color: red">审核意见：{{ item.applyOpinion }}</p>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
    <!-- <div class="cop">
      版本 v1.1.1.37
    </div> -->
  </div>
</template>

<script>
import { materialApplyList, taskNumber } from "../../api/app.js";
export default {
  name: "Index",
  components: {},

  data() {
    return {
      header: {
        show: true,
        return: false,
        search: false,
        title: "营销物料申请",
        home: false,
        close: true,
        checked: "0",
      },
      isLoading: false,
      pagesize: 10,
      pagNumber: 1,
      isHome: true,
      value: "",
      navactive: "",
      active: "",
      navlist: [
        { sum: "0", name: "全部" },
        { sum: "0", name: "已驳回" },
        { sum: "0", name: "审核中" },
        { sum: "0", name: "待下单" },
        { sum: "0", name: "待签收" },
        { sum: "0", name: "待布置" },
      ],
      list: [],
      bodyloading: false,
      loading: false,
      finished: false,
      liststate: "",
    };
  },
  watch: {
    $route: function (newVal, oldVal) {
      // console.log("===================", newVal, oldVal);
      if (newVal.query.state == "004") {
        this.pagNumber = 1;
        this.list = [];
        this.active = 0;
        this.getlist("");
        this.gettask();
      }
    },
  },
  computed: {},
  created() {
    // console.log(this.$route.query.state);
    this.getlist("");
    this.gettask();
  },
  mounted() {},
  methods: {
    gettask() {
      this.navlist[0].sum = "0";
      this.navlist[1].sum = "0";
      this.navlist[2].sum = "0";
      this.navlist[3].sum = "0";
      this.navlist[4].sum = "0";
      // this.navlist[5].sum = "0";
      taskNumber().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          let task = res.data;
          task.forEach((item) => {
            if (item.whereStatus == "ALL") {
              this.navlist[0].sum = "0"; //全部
            }
            if (item.whereStatus == "0") {
              this.navlist[1].sum = item.taskNumber; //已驳回
            }
            if (item.whereStatus == "1") {
              this.navlist[2].sum = item.taskNumber; //审核中
            }
            if (item.whereStatus == "2") {
              this.navlist[3].sum = item.taskNumber; //待下单
            }
            if (item.whereStatus == "3") {
              this.navlist[4].sum = item.taskNumber; //待签收
            }
            if (item.whereStatus == "4") {
              this.navlist[5].sum = item.taskNumber;//待布置
            }
          });
        }
      });
    },
    onRefresh() {
      this.onSearch();
      this.gettask();
    },
    //搜索
    onSearch() {
      // console.log(`搜索内容是${this.value}`);
      this.pagNumber = 1;
      this.list = [];
      this.getlist(this.liststate);
    },
    //新增
    onCancel() {
      // console.log("新增");
      this.$store.dispatch("selectOption/setSelectOptions", null);
      this.$store.dispatch("selectOption/setSelectCustomer", null);
      this.$store.dispatch("selectOption/setSelectBrand", null);
      this.$router.push({
        name: "submission",
        query: {
          state: "001",
        },
      });
    },
    todetail(item) {
      if (item.planNodeStatus == 2007) {
        this.$router.push({
          name: "decorate",
          query: {
            id: item.applyId,
            state: item.planNodeStatus,
          },
        });
      } else {
        this.$router.push({
          name: "detail",
          query: {
            id: item.applyId,
            state: item.planNodeStatus,
          },
        });
      }
    },
    //点击导航
    navclick(item) {
      this.active = item;
      let that = this;
      this.value = "";
      this.pagNumber = 1;
      this.list = [];
      console.log(item);
      switch (item) {
        case 0: //全部
          that.liststate = "";
          break;
        case 1: //已驳回
          that.liststate = "0";
          break;
        case 2: //审核中
          that.liststate = "1";
          break;
        case 3: //待下单
          that.liststate = "2";
          break;
        case 4: //待签收
          that.liststate = "3";
          break;
        case 5: //待布置
          that.liststate = "4";
          break;
      }
      // console.log(this.liststate);
      // return false
      this.bodyloading = true;
      this.getlist(this.liststate);
    },
    async getlist(state) {
      let that = this;
      let json = {
        pageNum: this.pagNumber,
        pageSize: this.pagesize,
        whereStatus: state,
        fuzzyParameter: this.value,
      };
      let data = [];
      let newlist = [];
      that.loading = true;
      that.finished = false;

      // console.log(json);
      await materialApplyList(json).then((res) => {
        // console.log(res);
        if (res.data.list.length > 0) {
          data = res.data.list;
          newlist = [...this.list, ...data];
          that.list = newlist;
          // console.log(that.list);
        } else {
          that.finished = true;
        }
        this.isLoading = false;
        that.loading = false;
        that.bodyloading = false;
      });
    },
    listonLoad() {
      this.pagNumber++;
      this.getlist(this.liststate);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  .van-search {
    width: calc(100% - 0.6rem);
  }
  .add {
    width: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.14rem;
    color: #7ac0f3;
    padding-right: 0.1rem;
    // background-color: #fff;
    .van-icon {
      font-size: 0.18rem;
    }
    p {
      margin: 0;
    }
  }
}
.listbox {
  width: 100vw;
  margin: 0 auto;
  > .van-list {
    width: 95vw;
    margin: 0 auto;
    > .list {
      width: 100%;
      padding: 0.1rem;
      margin-top: 0.1rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 0.03rem;
      > div {
        width: 100%;
        margin-top: 0.1rem;
        &:first-child,
        &:nth-child(2),
        &:nth-child(5),
        &:nth-child(6) {
          width: 50%;
          margin-top: 0;
        }
        &:nth-child(5),
        &:nth-child(6) {
          width: 50%;
          margin-top: 0.1rem;
        }
        p {
          font-size: 0.14rem;
          margin: 0;
        }
      }
      .state {
        p {
          color: #7ac0f3;
        }
      }
    }
  }
}
.cop {
  width: 100vw;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  font-size: 0.12rem;
  color: #999;
}
</style>
